<template>
    <div class="container" @click="handleGallaryClick">
        <div class="wrapper">
            <swiper  ref="mySwiper" :options="swiperOption">
                <swiper-slide v-for='(item,index) in imgs' :key='index'>
                    <img class="swiper-img" :src='item' alt="">
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
        </div>
    </div>
</template>

<script>
    export default {
        name:'CommonGallary',
        props:{
            imgs:{
                type:Array,
                default(){
                    return[]
                }
            }
        },
        methods:{
            handleGallaryClick(){
                this.$emit("close")
            }
        },
        data(){
            return{
                 swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationType:'fraction',
                    observeParents:true,
                    observer:true
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .container{
        display:flex;
        position:fixed;
        flex-direction: column;
        justify-content: center;;
        z-index:99;
        left:0;
        right:0;
        top:0;
        bottom:0;
        background:#000;
        .swiper-container{
            overflow:visible;
        }
        .wrapper{
            width:100%;
            height:0;
            padding-bottom:100%;
            .swiper-img{
                width:100%;
            }
            .swiper-pagination{
                color:#fff;
                bottom:-1rem;
            }
        }
    }
</style>